<template>
  <div class="ecuUpdateDetailComp2 h100">
    <!-- 搜索区域 -->
    <div class="ecuUpdateDetailComp2Search">
      <ecu-update-detail-search @clickbtn="handlerClickBtn"></ecu-update-detail-search>
    </div>
    <!-- 批次表格列表 -->
    <div class="ecuUpdateDetailComp2Mid">
      <div class="ecuUpdateDetailComp2MidTb">
        <ecu-update-detail-pc-tb
          :activePcIndex="activePcIndex"
          :loadingPcLists="loadingPcLists"
          :pcLists="pcPageLists"
          @changepc="handlerChangePc"></ecu-update-detail-pc-tb>
      </div>
      <div class="ecuUpdateDetailComp2MidPagination">
        <a-pagination
          v-show="totalCount"
          simple
          :current="pageInfo.pageNo"
          :total="totalCount"
          :pageSize="pageInfo.pageSize"
          @change="changePageSize" />
      </div>
    </div>
    <!-- 车辆零件信息 -->
    <div class="ecuUpdateDetailComp2Bot">
      <ecu-update-detail-main
        :loadingEcuLists="loadingEcuLists"
        :ecuLists="ecuLists"
        :levelLists="levelLists"
        :loadingLevelLists="loadingLevelLists"
        :activeEuModuleId="activeEuModuleId"
        @changeecu="handlerChangeEcu">
      </ecu-update-detail-main>
    </div>
  </div>
</template>
<script>
import taskApi from '@/api/modules/task'
import EcuUpdateDetailSearch from './components/EcuUpdateDetailSearch'
import EcuUpdateDetailPcTb from './components/EcuUpdateDetailPcTb'
import EcuUpdateDetailMain from './components/EcuUpdateDetailMain'
export default {
  components: {
    EcuUpdateDetailSearch,
    EcuUpdateDetailPcTb,
    EcuUpdateDetailMain

  },
  props: {
    // 查询条件
    query: {
      type: Object,
      default () {
        return null
      }
    }
  },
  data () {
    return {
      loadingEcuLists: false,
      ecuLists: [],
      // 当前ecu模块id
      activeEuModuleId: '',
      // 当前批次号
      activePcNo: '',
      // 控制当前选择当前批次号的索引号
      activePcIndex: 0,
      // 批次列表数据
      pcLists: [],
      loadingPcLists: false,
      loadingLevelLists: false,
      levelLists: [],
      customQuery: {
        startTime: null,
        endTime: null
      },
      totalCount: 15,
      pageInfo: {
        pageNo: 1,
        pageSize: 3
      }
    }
  },
  computed: {
    pcPageLists () {
      const start = (this.pageInfo.pageNo - 1) * this.pageInfo.pageSize
      return this.pcLists.slice(start, start + this.pageInfo.pageSize)
    }
  },
  watch: {
    query: {
      handler (val) {
        if (!val) {
          this.ecuLists = []
          this.activeEuModuleId = ''
          return
        }
        this.getData()
      },
      immediate: true
    }
  },
  methods: {
    handlerClickBtn (data) {
      if (this[data.type]) {
        this[data.type](data.data)
      }
    },
    searchData (otherQuery) {
      this.customQuery = {
        startTime: null,
        endTime: null
      }
      if (otherQuery.startTime) {
        this.customQuery.startTime = (new Date(otherQuery.startTime)).getTime()
      }
      if (otherQuery.endTime) {
        this.customQuery.endTime = (new Date(otherQuery.endTime)).getTime()
      }
      this.pageInfo.pageNo = 1
      this.getTaskVehicleDetailLists().then(() => {
        this.getLevelListsData()
      })
    },
    changePageSize (page) {
      console.log(page, 'page')
      this.pageInfo.pageNo = page
      const start = (this.pageInfo.pageNo - 1) * this.pageInfo.pageSize
      this.handlerChangePc({ index: start, checkSeqNo: this.pcLists[start].checkSeqNo })
      this.activePcIndex = (this.pageInfo.pageNo - 1) * this.pageInfo.pageSize
    },
    getData () {
      // 因为要传批次号作为getEcuBaseInfoData的参数,所以暂时用回调实现
      this.getTaskVehicleDetailLists().then(() => {
        this.getEcuBaseInfoData().then(() => {
          this.getLevelListsData()
        })
      })
    },
    // 获取当前任务下的所有零件信息,不包括N次升级信息
    getEcuBaseInfoData () {
      this.loadingEcuLists = true
      this.ecuLists = []
      this.activeEuModuleId = ''
      return new Promise((resolve, reject) => {
        // eslint-disable-next-line max-len
        taskApi.getTaskVehicleEcuList({ vehicleId: this.query.vehicleId, taskIds: [this.query.taskIds], checkSeqNo: this.activePcNo }).then(res => {
          this.ecuLists = res.data
          if (this.query.ecuModuleId) {
            this.activeEuModuleId = this.query.ecuModuleId
            resolve(true)
            return
          }
          if (res.data.length) {
            this.activeEuModuleId = res.data[0].ecuModuleId
          }
          resolve(true)
        }).catch((_err) => {
          reject(_err)
        }).finally(() => {
          this.loadingEcuLists = false
        })
      })
    },
    // 获取车辆N批次升级列表
    getTaskVehicleDetailLists () {
      this.loadingPcLists = true
      this.pcLists = []
      this.totalCount = 0
      this.activePcNo = ''
      this.activePcIndex = 0
      return new Promise((resolve, reject) => {
        const params = { vehicleId: this.query.vehicleId, taskId: this.query.taskIds }
        if (this.customQuery.startTime) {
          params.startTime = this.customQuery.startTime
        }
        if (this.customQuery.endTime) {
          params.endTime = this.customQuery.endTime
        }
        taskApi.getTaskVehicleDetailLists(params).then(res => {
          this.pcLists = res.data.map((item, index) => {
            return {
              ...item,
              index
            }
          })
          this.totalCount = res.data.length
          if (res.data.length) {
            this.activePcNo = res.data[0].checkSeqNo
            this.activePcIndex = 0
          }
          resolve(true)
        }).catch((_err) => {
          reject(_err)
        }).finally(() => {
          this.loadingPcLists = false
        })
      })
    },
    // 获取当前车辆在的某个零件在某批次下升级信息列表(升级阶段表)
    getLevelListsData () {
      this.levelLists = []
      if (!this.activeEuModuleId) {
        return
      }
      this.loadingLevelLists = true
      const params = {
        checkSeqNo: this.activePcNo,
        ecuModuleId: this.activeEuModuleId,
        taskId: this.query.taskIds,
        vehicleId: this.query.vehicleId
      }
      taskApi.getVehicleEcuDetail(params).then((res) => {
        this.levelLists = res.data
      }).finally(() => {
        this.loadingLevelLists = false
      })
    },
    handlerChangePc (data) {
      this.activePcNo = data.checkSeqNo
      this.activePcIndex = data.index
      this.getLevelListsData()
      this.getEcuBaseInfoData()
    },
    handlerChangeEcu (data) {
      this.activeEuModuleId = data
      this.getLevelListsData()
    }
  }
}
</script>
<style lang="less" scoped>
.ecuUpdateDetailComp2 {
  padding: 20px 24px 0 24px;
  display: flex;
  flex-direction: column;

  .ecuUpdateDetailComp2Search {
    flex: none;
    margin-bottom: 10px;
  }

  .ecuUpdateDetailComp2Mid {
    flex: none;
    min-height: 200px;
    max-height: 260px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    .ecuUpdateDetailComp2MidTb {
      flex:1 0 0;
    }
    .ecuUpdateDetailComp2MidPagination {
      flex:none;
      text-align: center;
      margin-top: 10px;
    }
  }

  .ecuUpdateDetailComp2Bot {
    flex: 1 0 0;
    min-height: 300px;
  }
}
</style>
